<template>
  <div class="pie-container" :style="{'min-height': height + 'px'}">
    <div v-if="spinning" class="mask">
      <a-spin :spinning="spinning" tip="Loading..." />
    </div>
    <div v-if="title" class="chart-title">{{title}}</div>
    <div v-if="visible" :id="container" @click.stop.prevent="stopHandle"></div>
  </div>
</template>
<script lang='ts'>
import { Component, Watch, Vue, Prop } from 'vue-property-decorator';
import { Chart } from '@antv/g2';

@Component
export default class pieChart extends Vue {
  @Prop({ type: String, default: '' }) title!: string; // 图表标题
  @Prop({ type: String, default: 'pieChart' }) container!: string; // 渲染chart的节点id
  @Prop({ type: Number, default: 200 }) height!: number; // 高度
  @Prop({ type: Object, default: () => ({ }) }) chartOptions!: any; // Chart配置参数
  @Prop({ type: Array, default: () => [20, 20, 20, 20] }) padding!: number[]; // chart的padding值
  @Prop({ type: Array, default: () => [] }) data!: any[]; // 数据源
  @Prop({
    type: Object || Boolean,
    default: () => ({
      showTitle: false,
      showMarkers: false
    })
  })
  toolTip!: any; // toolTip配置参数, false则不显示
  @Prop({ type: String }) valueName!: string; // 数据源的属性名，y轴。值
  @Prop({ type: String }) keyName!: string; // 数据源的属性名，x轴。
  @Prop({ type: Array || undefined, default: undefined }) colors!: string[] | undefined; // 不同数据对应的颜色，传入undefined则使用G2默认颜色
  @Prop({ type: String, default: 'left-top' }) legendPosition!: any; // lengend的位置
  @Prop({ type: Number, default: 6 }) labelLength!: number; // label展示文字字数

  visible: boolean = true
  spinning: boolean = true

  @Watch('data')
  dataChange () {
    this.spinning = true
    this.visible = false
    setTimeout(() => {
      this.visible = true
      this.$nextTick(() => {
        this.initCircleChart()
      })
    }, 0);
  }
  initCircleChart () {
    const chart = new Chart({
      container: this.container,
      padding: this.padding,
      height: this.height,
      autoFit: true,
      ...this.chartOptions
    });
    const sum = this.data.map((item: any) => item[this.valueName]).reduce((total: any, num: any) => total + num)
    chart.coordinate('theta', {
      radius: 0.75
    });

    chart.data(this.data);
    chart.on('legend-item:click', (e: any) => {
      console.log(111111, e);
      e.event.preventDefault()
      // e.view.ele.stopPropagation()
    });

    chart.tooltip(this.toolTip);

    chart.legend({
      position: this.legendPosition,
      itemName: {
        // 图例项文字
        style: {
          fill: '#000'
        }
      }
    });

    chart
      .interval()
      .position(this.valueName)
      .color(this.keyName, this.colors)
      .animate({
        appear: {
          duration: 3000
        }
      })
      .label(this.valueName, {
        content: (data) => {
          // return `${(data[this.keyName].length > 8 && this.legendPosition === 'bottom') ? data[this.keyName].slice(0, this.labelLength) + '...' : data[this.keyName]}`;
          return `${data[this.keyName]}: ${((data[this.valueName] / sum) || 0 * 100).toFixed(2)}%`;
        },
        style: {
          fontSize: this.legendPosition === 'bottom' ? 12 : 14,
          fill: '#000'
        }
      })
      .adjust('stack');

    chart.interaction('element-active');
    chart.render();
    this.spinning = false
  }
  stopHandle () {}
}
</script>
<style lang='scss' scoped>
.pie-container {
  position: relative;
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
}
.chart-title {
  padding: 40px 0 20px;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
